 <!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>后台单页管理</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="__ADMIN__css/bootstrap.min.css" rel="stylesheet">
    <link href="__ADMIN__css/font-awesome.min93e3.css" rel="stylesheet">
    <link href="__ADMIN__css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="__ADMIN__css/animate.min.css" rel="stylesheet">
    <link href="__ADMIN__css/style.min.css" rel="stylesheet">
    <link href="__ADMIN__js/plugins/layer/skin/layer.css" rel="stylesheet">
     <link href="__ADMIN__js/plugins/layer/laypage/skin/laypage.css" rel="stylesheet">
     <style>
         img{
            width:50px;
            height:50px;
            border-radius:50%;
         }
     </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>单页管理</h5>
                    </div>
                    <div class="ibox-content">
                     <div class="row m-b-sm m-t-sm">
                        <div class="col-md-2">
                            <a href="{:U('single/add')}" class="btn btn-outline btn-primary">添加内容</a>
                        </div>
                        <form name="admin_list" id="admin_list" action="{:U('index')}" method="get">
                            <div class="col-md-7" style="margin-top: 2px">
                                <div class="input-group">
                                    <input type="text" name="title" placeholder="请输入关键词" value="{$title}" class="input-sm form-control"> <span class="input-group-btn">
                                            <button type="submit" class="btn btn-sm btn-primary"> 搜索</button> </span>
                                </div>
                            </div>
                        </form>
                    </div>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th>
                                    <th>图片</th>
                                    <th>内容</th>
                                    <th>关键词</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            <volist name="list" id="va">
                                <tr>
                                    <td>{$va.id}</td>
                                    <td>{$va.title}</td>
                                    <td><img src="/{$va.img}" style="height: 100px;width: 100px"></td>
                                    <td>{$va.content|htmlspecialchars_decode|strip_tags|mb_substr = 0,12,"utf-8"}</td>
                                    <td>{$va.keyword}</td>
                                    <td>
                                    <if condition="($va.status eq 1)">
                                    <a href="javascript:changeStatus({$va.id})" id="status{$va.id}" class="label label-primary">正常</a>
                                        <else />
                                    <a href="javascript:changeStatus({$va.id})" id="status{$va.id}" class="label label-danger">禁止</a>
                                    </if>
                                    </td>
                                    <td><a href="{:U("single/edit?id=".$va['id'])}" class="label label-primary"><i class="fa fa-edit"></i> 修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:del({$va.id})" class="label label-danger"><i class="fa fa-trash"></i> 删除</a></td>
                                </tr>
                            </volist>
                            </tbody>
                        </table>
                        <div id="pages" style="text-align:center;margin-left:10px;">{$page}</div>
                    </div>
                </div>
            </div>
        </div>
</div>
    <!-- 全局js -->
    <script src="__ADMIN__js/jquery.min.js"></script>
    <script src="__ADMIN__js/bootstrap.min.js"></script>
    <script src="__ADMIN__js/plugins/layer/layer.min.js"></script>
    <script src="__ADMIN__js/plugins/layer/laypage/laypage.js"></script>
    <script src="__ADMIN__js/common.js"></script>
    <script>
    //改变权限状态
    function changeStatus(id){
        var objectStatus = $('#status'+id);
        common.status("{:U('single/changeStatus')}",id,objectStatus);
    }
    function del(id){
        common.del("{:U('single/del')}",id,"{:U('single/index')}");
    }
    //第三种分页方式
    var title='{$title}';
    laypage({
        //获取上面的div中的id
        cont:'pages',
        //可以叫服务端把总页数放在某一个隐藏域，再获取，即后台传来的总页数
        pages:{$totalPage},
        //获取被选中的页数的颜色
        skin:'#009688',
        skip:true,
        //通过url获取当前页，也可以同上（pages）方式获取
        curr:function(){
            var page = location.search.match(/page=(\d+)/);
            return page ? page[1]:1;
        }(),
        //触发分页后的回调
        jump:function(e,first){
            //一定要加此判断，否则初始时会无限刷新
            if(!first){ 
                location.href='?title='+title+'&page='+e.curr;
            }
        }
    });
        
    </script>

</body>

</html>
